<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4002669_rm1uyk5yokh.css"
    />
    <link rel="stylesheet" href="lib/css/swiper.css" />
    <link rel="stylesheet" href="css/detail.css" />
    <title>智慧商城—详情界面</title>
  </head>
  <body>
    <header>
      <a href="#">
        <i class="iconfont icon-arrow-left"></i>
      </a>
      <h1>商品详情界面</h1>
    </header>

    <div class="detail">
      <div class="detailCont">
        <i class="iconfont icon-nanguo-"></i>
        <p>哇哦，商品被下架了~</p>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
      <!-- swiper -->
      <div class="swiper">
        <div class="swiper-wrapper"></div>
        <div class="swiper-pagination"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="index">0/5</div>
    </div>

    <!-- 商品详情 -->
    <div class="goodDetail">
      <div class="price"></div>
      <div class="goodD">
        <p></p>
      </div>
      <div class="Asale" id="Asale">
        <p>
          <i class="iconfont icon-zhengque"></i>
          <span>七天无理由退货</span>
        </p>
        <p>
          <i class="iconfont icon-zhengque"></i>
          <span>48小时发货</span>
        </p>
      </div>
      <div class="evalute">
        <div class="evaluteTit">
          <p>商品评价(<i class="goodEvaluate">5</i>条)</p>
          <a href="javascript:;" class="lookMore">查看更多>></a>
        </div>
        <div class="evaluteCont">
          <ul></ul>
        </div>
      </div>
      <div class="goodDescription">
        <h3>商品描述</h3>
        <div class="goodDescriptionImg">
          <img src="" alt="" />
        </div>
      </div>
    </div>

    <!-- footer -->
    <footer>
      <ul>
        <li>
          <a href="index.html">
            <i class="iconfont icon-shouye"></i>
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="shopCart.html" id="shopCart">
            <i class="iconfont icon-gouwuche"></i>
            <p>购物车</p>
            <span class="shopCartNum"></span>
          </a>
        </li>
        <li class="footerOpera">
          <a href="JavaScript:;" id="jrgwc" data-index="1">加入购物车</a>
        </li>
        <li class="footerOpera">
          <a href="JavaScript:;" id="buy" data-index="2">立即购买</a>
        </li>
      </ul>
    </footer>

    <div class="afterSale" id="afterSale">
      <div class="afterSaleCont">
        <span class="iconfont icon-guanbi close" id="close"></span>
        <h2>服务</h2>
        <div class="ul">
          <li>
            <i class="iconfont icon-zhengque"></i>
            <div>
              <p>七天无理由退货</p>
              <span>满足相应条件时，消费者可申请7天无理由退货</span>
            </div>
          </li>
          <li>
            <i class="iconfont icon-zhengque"></i>
            <div>
              <p>七天无理由退货</p>
              <span>满足相应条件时，消费者可申请7天无理由退货</span>
            </div>
          </li>
        </div>
      </div>
    </div>

    <div class="addGood">
      <div class="addGoodCont">
        <div class="addGoodTop">
          <img src="imgs/10034.jpg" id="addGoodTopImg" alt="" />
          <div class="addGoodTopR">
            <p>￥<span class="addGoodTopRPrice">88.00</span></p>
            <i class="addGoodKc">库存：100</i>
            <input type="hidden" id="hidden" />
            <input type="hidden" id="hidden2" />
          </div>
        </div>
        <div class="addGoodBot">
          <span>数量</span>
          <div class="count">
            <button class="decrease">-</button>
            <input type="text" value="1" id="goodNum" />
            <button class="increase">+</button>
          </div>
        </div>
        <a href="javascript:;" class="addCart" id="addCart">加入购物车</a>
      </div>
      <span class="iconfont icon-guanbi close" id="closeAddCart"></span>
    </div>

    <div class="mask"></div>
    <script src="lib/js/swiper.js"></script>
    <script src="lib/js/axios.js"></script>
    <script src="api/goodsDetail.js"></script>
    <script src="static/common.js"></script>
  </body>
</html>
